<template>
	<!-- 外层容器 -->
	<view class="fullscreen-container">
		<!-- 二维码卡片容器 -->
		<view class="qr-code-card" shadow>
			<!-- 二维码图片 -->
			<image :src="qrCodePath" mode="widthFix" class="qr-image" @click="handleQrClick" @longpress="saveQrCode"
				:show-menu-by-longpress="true" />
			<!-- 提示文字（可选） -->
			<text class="tip-text">扫描二维码联系客服</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl : getApp().globalData.config.baseUrl,
				qrCodePath: '',
			}
		},
		onLoad() {
			this.qrCodePath = this.baseUrl + '/img/wx.png'
		},
		methods: {
			handleQrClick() {
				// 点击二维码事件
				uni.showToast({
					title: '点击二维码'
				})
			},
			async saveQrCode() {
				try {
					// 步骤1：显示加载状态
					uni.showLoading({
						title: '保存中...',
						mask: true
					})

					// 步骤2：获取图片临时路径（网络图片需下载）
					const tempPath = await this.downloadImage()

					// 步骤3：检查相册权限
					await this.checkAuth()

					// 步骤4：保存到相册
					await this.saveToAlbum(tempPath)

					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
				} catch (err) {
					this.handleSaveError(err)
				} finally {
					uni.hideLoading()
				}
			},

			// 下载图片到本地临时路径
			downloadImage() {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: this.qrCodePath,
						success: res => {
							if (res.statusCode === 200) {
								resolve(res.tempFilePath)
							} else {
								reject(new Error('下载二维码失败'))
							}
						},
						fail: () => reject(new Error('网络错误，请重试'))
					})
				})
			},

			// 检查相册权限
			checkAuth() {
				return new Promise((resolve, reject) => {
					uni.getSetting({
						success: res => {
							if (!res.authSetting['scope.writePhotosAlbum']) {
								uni.authorize({
									scope: 'scope.writePhotosAlbum',
									success: resolve,
									fail: () => {
										uni.showModal({
											title: '权限申请',
											content: '需要相册权限保存图片',
											success: (res) => {
												if (res.confirm) {
													uni.openSetting()
												}
												reject(new Error('权限被拒绝'))
											}
										})
									}
								})
							} else {
								resolve()
							}
						},
						fail: reject
					})
				})
			},
			// 保存到系统相册
			async saveToAlbum(tempPath) {
				// 处理安卓11的适配
				if (uni.getSystemInfoSync().platform === 'android' &&
					uni.getSystemInfoSync().osVersion >= '10') {
					tempPath = await this.handleAndroidQ(tempPath)
				}

				return new Promise((resolve, reject) => {
					uni.saveImageToPhotosAlbum({
						filePath: tempPath,
						success: resolve,
						fail: reject
					})
				})
			},
			// 错误统一处理
			handleSaveError(err) {
				const messages = {
					'权限被拒绝': '请开启相册权限后重试',
					'网络错误，请重试': '网络连接异常，请检查网络',
					'下载二维码失败': '二维码下载失败，请稍后重试'
				}
				uni.showToast({
					title: messages[err.message] || '保存失败',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 全屏容器 */
	.fullscreen-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
	}

	/* 二维码卡片样式 */
	.qr-code-card {
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 二维码图片样式 */
	.qr-image {
		width: 400rpx;
		height: 400rpx;
		margin-bottom: 20rpx;
	}

	// /* 响应式适配 */
	// .qr-image {
	//   width: 70vw;
	//   max-width: 600rpx;
	// }

	/* 提示文字样式 */
	.tip-text {
		font-size: 28rpx;
		color: #666;
	}
</style>